<template>
  <div id="app">
    <div id="app">
      <el-table v-loading="loading" :data="filterData">
        <el-table-column prop="date" label="时间" width="200"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180"
        ></el-table-column>
      </el-table>
      <el-pagination  
      layout="prev, pager, next, sizes" 
      :total="tableData.length"
      :page-sizes="[5,10,20]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  mounted(){
    let _this = this;
    setTimeout(function (){
      _this.loading =false;
    },2000)
  },
  computed: {
    filterData: function(){
        let filterData = this.tableData.slice(
          (this.pageNum - 1) * this.pageSize,
          this.pageNum * this.pageSize
        );
        return filterData;
    }
  },
  data: function () {
    return {
      loading:true,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 路",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
         {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 路",
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎8",
          address: "上海市普陀区金沙江路 1518 弄",
        },
         {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 路",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎7",
          address: "上海市普陀区金沙江路 1518 弄",
        },
         {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 路",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      pageSize: 10,
      pageNum : 1,
    };
  },
  methods:{
    handleSizeChange: function(pageSize){
      console.log(pageSize);
      this.pageSize = pageSize
    },
    handleCurrentChange: function(pageNum){
      console.log("当前页面:",pageNum);
      this.pageNum = pageNum
    }
  }
};
</script>

<style>
</style>
